/**
 * Renders into a button that allows choosing a color from a popup color table.
 *
 * @author Lucian CIOROGA
 */
ColorChooserButton = Button.extend({
    /**
     * Constructor.
     * @param {String} id		The id of the button (should be unique).
     * @param {String} color	The initial color (CSS).
     * @param {Object} options	An option map for this button.
     *
     * Options are:
     * 		*			Inherited from Button.
     * 		colors		Function that returns a bidimensional array of colors. This allows the user to override the default color table that will be shown onmouseover.
     */
    initialize: function(id, color, options){
        this.parent(id, options);
        this.color = color;
    },
    
    /**
     * @return The table of colors.
     */
    getColors: function(){
        if (this.options.colors != null) {
            return this.options.colors();
        } else {
            return [['#000', '#930', '#330', '#030', '#036', '#007', '#339', '#333'], ['#700', '#f60', '#770', '#070', '#077', '#00f', '#669', '#777'], ['#f00', '#f90', '#9c0', '#396', '#3cc', '#36f', '#707', '#999'], ['#f0f', '#fc0', '#ff0', '#0f0', '#0ff', '#0cf', '#936', '#ccc'], ['#f9c', '#fc9', '#ff9', '#cfc', '#cff', '#9cf', '#c97', '#fff']];
        }
    },
    
    /**
     * @param {ColorChooserButton} self
     * @param {Editor} editor
     */
    /*@Override*/
    build: function(self, editor){
        // the color chooser <div> - the popup that will apear onmouseover
        this.colorChooser = new Element('div', {
            'styles': {
                'background-color': '#eee',
                'position': 'absolute',
				'border': '2px solid #ccc'
            }
        });
        
        var i = 0;
        var j = 0;
        var x = 0;
        var y = 0;
        $each(this.getColors(), function(row){
            $each(row, function(c){
                var colorDiv = new Element('div', {
                    'styles': {
                        'background-color': c,
                        'height': '14px',
                        'width': '14px',
                        'float': 'left',
                        'position': 'absolute'
                    },
                    'events': {
                        'click': function(){
                            self.color = c;
                            self.execute(editor, c);
                        },
                        'mouseenter': function(){
                            this.setStyle('width', 12);
                            this.setStyle('height', 12);
                            this.setStyle('border', '1px solid #fff');
                        },
                        'mouseleave': function(){
                            this.setStyle('width', 14);
                            this.setStyle('height', 14);
                            this.setStyle('border', 'none');
                        }
                    }
                });
                
                colorDiv.setHTML("&nbsp;");
                colorDiv.setStyle('font-size', '1px');
                
                colorDiv.setStyle('top', i * 18 + 4);
                colorDiv.setStyle('left', j * 18 + 4);
                
                j++;
                
                self.colorChooser.adopt(colorDiv);
            });
            
            i++;
            
            if (y < j) {
                y = j;
            }
            
            j = 0;
        });
        
        x = i;
        
        var height = x * 18 + 4;
        var width = y * 18 + 4;
        
        this.colorChooser.setStyle('width', width);
        this.colorChooser.setStyle('height', height);
        
        // a new type of button
        var component = new Element('div', {
            'styles': {
                'height': '100%',
                'width': '18px',
                'text-align': 'center',
                'cursor': 'pointer'
            },
            'events': {
                'mouseenter': function(){
                    this.adopt(self.colorChooser);
					
					self.colorChooser.setStyle('top', this.getCoordinates().bottom);
                },
                'mouseleave': function(){
                    self.colorChooser.remove();
                }
            }
        });
        
        // loads the default button
        var button = this.parent(self, editor);
		
        // builds the color preview
        this.colorPreview = new Element('div', {
            'styles': {
                'margin': '1px 1px 1px 1px',
                'background-color': self.color,
                'border': '1px solid #ccc',
                'font-size': '1px',
				'float': 'left'
            }
        });
        
        this.colorPreview.setStyle('height', '4px');
        this.colorPreview.setStyle('width', '15px');
        
        this.colorPreview.setHTML("&nbsp;");
        
        // populates the color component (the actual color chooser buttton)
        component.adopt(button);
        component.adopt(this.colorPreview);
        
        return component;
    },
    
    /*@Override*/
    execute: function(editor, value){
        value = value.charAt(0) +
	        value.charAt(1) +
	        value.charAt(1) +
	        value.charAt(2) +
	        value.charAt(2) +
	        value.charAt(3) +
	        value.charAt(3);
        
        this.colorPreview.setStyle('background-color', value);
        this.colorChooser.remove();
        
        this.parent(editor, value);
    }
});
